<script setup lang="ts">
let alignItem = ref('stretch')
</script>

<template>
  <div class="wrap">
    <div class="form">
      <label for="">align-items</label>
      <select v-model="alignItem">
        <option value="auto">auto</option>
        <option value="normal">normal</option>
        <option value="start">start</option>
        <option value="end">end</option>
        <option value="center">center</option>
        <option value="stretch" selected>stretch</option>
        <option value="baseline">baseline</option>
        <option value="first baseline">first baseline</option>
        <option value="">last baseline</option>
      </select>
    </div>
    <section>
      <div class="container">
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
      </div>
    </section>
  </div>
</template>

<style scoped lang="scss">
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  width: 100vw;
  min-height: 100vh;
  font-family: "Exo", "Bungee Shade", cursive, Arial, sans-serif;
  background-color: #557;
  color: #fff;
  display: grid;
  place-content: center;
  padding: 1rem;
  gap: 1rem;

  section {
    display: flex;
    box-shadow: 0 0 0 6px rgb(217 210 10 / 9%);
    border-radius: 4px;

    width: 80vw;
    margin: 0 auto;
    font-family: "Bungee Shade", cursive;
    font-size: 1.2rem;
    .container {
      --width: 100%;
      --align-items: v-bind(alignItem);

      display: grid;
      gap: 1rem;

      grid-template-columns: repeat(8, 1fr);
      grid-auto-rows: 80px;
      grid-auto-columns: 80px;
      grid-template-areas:
    "a a a a b b b b"
    "a a a a b b b b"
    "c c c c d d d d"
    "c c c c d d d d";
      align-items: var(--align-items, stretch);

      width: var(--width);
      padding: 1rem;
      outline: 1px dashed #f36;
      counter-reset: item;

      .item {
        counter-increment: item;
        display: flex;
        justify-content: center;
        align-items: center;
        background: #2c6;
        color: #000;
        position: relative;

        &:nth-child(1) {
          grid-area: a;
          background-color: #f196f3;
        }

        &:nth-child(2) {
          align-self: end;
          grid-area: b;
          background-color: #dac2f1;
        }

        &:nth-child(3) {
          grid-area: c;
          background-color: #ccf1c2;
        }

        &:nth-child(4) {
          grid-area: d;
          background-color: #c2e9f1;
        }

        &:nth-child(5) {
          grid-row: 1 / -1;
          grid-column: span 2;
          background-color: #90aeef;
        }

        &:nth-child(6) {
          background-color: #f44336;
        }

        &:nth-child(7) {
          background-color: #2196f3;
        }

        &:nth-child(8) {
          background-color: #f196f3;
        }

        &::before {
          content: counter(item);
          font-family: "Bungee Shade", cursive;
          font-size: 3.5rem;
        }

      }
    }
  }
}
</style>
